<!--1、登录弹出框为页面弹出框，非新窗口-->
<!--2、登录页面，使用本地数据库进行用户名密码的一个存储使用-->
<template>
    <div style="text-align: center">
        <br/>
        <br/>
        <span style="text-align: center">这是一个丑的登录页面</span>
        <br/>
        <br/>
        <el-input v-model="userName" placeholder="请输入用户名" size="mini" style="width: 80%;" @blur="checkName"></el-input>
        <br/>
        <br/>
        <el-input v-model="password" placeholder="请输入密码" size="mini" style="width:80%;"></el-input>
        <br/>
        <br/>
        <div>
            <el-button type="primary" plain @click="login" size="mini">登录</el-button>
            <el-button type="primary" plain @click="register" size="mini">注册</el-button>
        </div>
        <span>{{notes}}</span>
    </div>
</template>

<script>
    import moment from 'moment';
    import Service from '../../common/Service'

    export default {
        name: "LoginAndRegister",
        data() {
            return {
                userName: "",
                password: "",
                notes: "",
                weight: 2
            }
        },
        methods: {
            /**
             * 检测用户名是否被占用，失去焦点后立马触发
             */
            checkName() {
                // if (this.userName === "") {
                //     return;
                // }
                // Service.base.checkName(this.userName).then(data => {
                //     console.log(data)
                // })
            },
            login() {
                if (this.userName === "") {
                    this.$message("用户名不为空!");
                    return;
                }
                if (this.password === "") {
                    this.$message("密码不为空!");
                    return;
                }
                Service.base.login(this.userName, this.password).then(data => {
                    if (data.length === 0) {
                        this.$message.error('查无此人!');
                    } else {
                        this.$store.dispatch("setUser", data[0]);
                        this.$message.success('查询成功!');
                        this.close();
                    }
                })
            },
            register() {
                if (this.userName === "") {
                    this.$message("用户名不为空!");
                    return;
                }
                if (this.password === "") {
                    this.$message("密码不为空");
                    return;
                }
                Service.base.register(this.userName, this.password).then(data => {
                    this.$message.success('注册成功');
                    this.close();
                })
            },
            close() {
                this.$emit('close');
            }
        }
    }
</script>

<style scoped>

</style>